<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TestCom from './components/TestCom.vue'
import TestComponent from './components/TestComponent.vue'
import LayoutCompoent from './components/layout/LayoutCompoent.vue'
import { onMounted } from 'vue'
import { useAppStore } from './store/stroes.js'

const appStore = useAppStore()

onMounted(async () => {
appStore.clearAllData()
  // 先从本地存储加载数据
  appStore.loadFromStorage()

  // 如果本地没有数据，再从API获取
  if (!appStore.hasTreeData || !appStore.hasUserConfigers) {
    await fetchDataFromAPI()
  }
})

const fetchDataFromAPI = async () => {
  try {
    const res = await fetch('http://127.0.0.1:5000/api/jsondata')

    if (!res.ok) {
      throw new Error(`HTTP error! status: ${res.status}`)
    }

    const data = await res.json()

    // 存储到全局状态
    appStore.setTreeData(data.treeData || [])
    appStore.setUserConfigers(data.userConfigers || [])
    appStore.setSentenceData(data.sentenceData || [])
    appStore.setInputData(data.inputData || {})

    console.log('treeData:', appStore.treeData)
    console.log('userConfigers:', appStore.userConfigers)
    console.log('inputData:', appStore.inputData)
  } catch (err) {
    console.error('请求失败:', err)
  }
}
</script>

<template>
  <!--<TestCom/>-->
  <LayoutCompoent />
  <!-- <HelloWorld  />-->
  <!-- <TestComponent  />-->
</template>

<style scoped>
</style>